<template>
  <div class="body">
    <div class="companyList">
      <div
        v-for="company in companyList"
        :key="company.id"
        class="company"
        @click="goProductpages(company)"
      >
        <img
          class="company-img"
          :src="company.img"
        >
        <div class="company-name">{{ company.companyName }}</div>
      </div>
    </div>
    <el-pagination
      class="pagination"
      background
      prev-text="上一页"
      next-text="下一页"
      layout="prev, pager, next,total"
      :total="total"
      :page-size="pageSize"
      :page-num="pageNum"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import { getCompanyPage } from '@/api/company'
export default {
  data() {
    return {
      companyList: [],
      total: 0,
      pageNum: 1,
      pageSize: 18
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    async load() {
      const data = await getCompanyPage({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
      this.companyList = data.data.records
      this.total = data.data.total
    },
    pageChange(page) {
      this.pageNum = page
      this.load()
    },
    goProductpages(company) {
      this.$router.push('/receptionProduct?companyId=' + company.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.companyList {
  min-height: 700px;
  .company {
    cursor: pointer;
    border: 1px #99a9bf solid;
    width: 166.5px;
    height: 150px;
    margin: 10px 20px 0 0;
    float: left;
    padding: 10px;

    .company-name {
      font-weight: 600;
      text-align: center;
    }

    .company-img {
      width: 100%;
      height: 105px;
      object-fit: cover;
    }
  }

  .company:nth-child(6n) {
    margin-right: 0px;
  }
}

.pagination {
  margin: 20px 0;
}
</style>
